<!-- components/NavBar/index.vue -->
<template>
  <div class="nav-bar">
    <div class="nav-content">
      <!-- 返回按钮 -->
      <div class="left-area" @click="onBack">
        <van-icon 
          name="arrow-left"
          size="20"
          color="#fff"
        />
      </div>

      <!-- 标题 -->
      <div class="title">{{ title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',

  props: {
    // 标题文字
    title: {
      type: String,
      default: ''
    },
    // 是否自定义返回事件
    customBack: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    onBack() {
      if (this.customBack) {
        this.$emit('on-back')
      } else {
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #1989fa; // 蓝色背景
  padding-top: env(safe-area-inset-top); // 适配刘海屏

  .nav-content {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;

    .left-area {
      position: absolute;
      left: 0;
      height: 100%;
      padding: 0 16px;
      display: flex;
      align-items: center;
    }

    .title {
      flex: 1;
      text-align: center;
      font-size: 17px;
      font-weight: 500;
      color: #fff;
      // 超出省略
      padding: 0 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>